<!--
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
-->
<!--

The `core-icon` element displays an icon using CSS background image. By default an icon renders as 24px square.

Example using src:

    <core-icon src="star.png"></core-icon>

Example setting size to 32px x 32px:

    <core-icon src="big_star.png" size="32"></core-icon>

Example using icon from default iconset:

    <core-icon icon="menu"></core-icon>

Example using icon `cherry` from custom iconset `fruit`:

    <core-icon icon="fruit:cherry"></core-icon>

See [core-iconset](#core-iconset) and [core-iconset-svg](#core-iconset-svg) for more information about
how to use a custom iconset.

See [core-icons](#core-icons) for the default set of icons. To use the default set of icons you'll need to include an import for `core-icons.html`.

@group Polymer Core Elements
@element core-icon
@homepage polymer.github.io
-->
<link rel="import" href="../core-iconset/core-iconset.html">

<link rel="stylesheet" href="core-icon.css" shim-shadowdom>

<polymer-element name="core-icon" attributes="src size icon">
<script>
(function() {
  
  // mono-state
  var meta;
  
  Polymer('core-icon', {

    /**
     * The URL of an image for the icon. If the src property is specified,
     * the icon property should not be.
     *
     * @attribute src
     * @type string
     * @default ''
     */
    src: '',

    /**
     * Specifies the size of the icon in pixel units.
     *
     * @attribute size
     * @type string
     * @default 24
     */
    size: 24,

    /**
     * Specifies the icon name or index in the set of icons available in
     * the icon's icon set. If the icon property is specified,
     * the src property should not be.
     *
     * @attribute icon
     * @type string
     * @default ''
     */
    icon: '',

    observe: {
      'size icon': 'updateIcon'
    },

    defaultIconset: 'icons',

    ready: function() {
      if (!meta) {
        meta = document.createElement('core-iconset');
      }
      this.updateIcon();
    },

    srcChanged: function() {
      this.style.backgroundImage = 'url(' + this.src + ')';
      this.style.backgroundPosition = 'center';
      this.style.backgroundSize = this.size + 'px ' + this.size + 'px';
    },

    getIconset: function(name) {
      return meta.byId(name || this.defaultIconset);
    },

    updateIcon: function() {
      if (this.size) {
        this.style.width = this.style.height = this.size + 'px';
      }
      if (this.icon) {
        var parts = String(this.icon).split(':');
        var icon = parts.pop();
        if (icon) {
          var set = this.getIconset(parts.pop());
          if (set) {
            set.applyIcon(this, icon, this.size / set.iconSize);
          }
        }
      }
    }

  });
  
})();
</script>

</polymer-element>
